<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="carousel-container">
      <el-carousel trigger="click" height="400px" :autoplay="true">
        <el-carousel-item v-for="(slide, index) in slides" :key="index">
          <img :src="slide.image" :alt="slide.title" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 搜索框 -->
    <div class="search-container">
      <el-input
        v-model="searchQuery"
        placeholder="搜索商品..."
        class="search-input"
      >
        <template #append>
          <el-button type="primary" @click="handleSearch"> 搜索 </el-button>
        </template>
      </el-input>
    </div>

    <!-- 商品列表 -->
    <div class="products-container">
      <el-row :gutter="20">
        <el-col
          v-for="product in products"
          :key="product.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
        >
          <el-card class="product-card" :body-style="{ padding: '0px' }">
            <img :src="product.image" class="product-image" />
            <div class="product-info">
              <h3 class="product-title">{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
              <el-button type="primary" class="buy-button">
                立即购买
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const searchQuery = ref("");
const slides = ref([
  {
    image:
      "https://img2.baidu.com/it/u=913727669,1993645475&fm=253&fmt=auto&app=138&f=JPG?w=1600&h=500",
    title: "促销活动1",
  },
  {
    image:
      "https://img.zcool.cn/community/01e5135b9a51d9a8012099c8d98f40.png?imageMogr2/auto-orient/thumbnail/1280x%3e/sharpen/0.5/quality/100/format/webp",
    title: "促销活动2",
  },
  {
    image:
      "https://img.zcool.cn/community/0115115b9a51e4a8012099c8b7b24c.png?imageMogr2/auto-orient/thumbnail/1280x%3e/sharpen/0.5/quality/100/format/webp",
    title: "促销活动3",
  },
]);

const products = ref([
  {
    id: 1,
    name: "商品1",
    description: "这是一个很棒的商品描述...",
    price: 199.99,
    image:
      "https://img2.baidu.com/it/u=1705766420,380501671&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
  },
  // 添加更多商品...
]);

const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({
      path: "/products",
      query: { keyword: searchQuery.value.trim() },
    });
  }
};
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-container {
  margin-bottom: 2rem;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

:deep(.el-carousel__container) {
  height: 400px !important;
}

:deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
}

:deep(.el-carousel__arrow--left) {
  left: 20px;
}

:deep(.el-carousel__arrow--right) {
  right: 20px;
}

:deep(.el-carousel__indicators) {
  bottom: 20px;
  z-index: 2;
}

:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
}

:deep(.el-carousel__item) {
  overflow: hidden;
}

.search-container {
  margin-bottom: 2rem;
}

.search-input {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: block;
}

.products-container {
  margin-top: 2rem;
}

.product-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 1rem;
}

.product-title {
  font-size: 1.1rem;
  margin: 0 0 0.5rem 0;
}

.product-desc {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.product-price {
  color: #f56c6c;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.buy-button {
  width: 100%;
}
</style> 